<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>满分信手拈来喵</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
        }
        
        body {
            background-color: #1a1a1a; /* 更深的背景色减少反光 */
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 20px;
            color: #e0e0e0; /* 浅灰色文字提高可读性 */
        }
        
        #app {
            width: 100%;
            max-width: 1200px;
            background: #2d2d2d; /* 深灰色背景替代白色 */
            border-radius: 16px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4); /* 加深阴影 */
            padding: 40px;
            margin: 20px;
        }
        
        .title {
            text-align: center;
            font-size: 32px;
            margin-bottom: 30px;
            color: #ffffff; /* 白色标题提高对比度 */
        }
        
        .main-input {
            width: 100%;
            min-height: 350px;
            border: 2px solid #555555; /* 中灰色边框替代浅绿色 */
            border-radius: 12px;
            padding: 20px;
            font-size: 18px;
            resize: vertical;
            transition: border-color 0.3s;
            margin-bottom: 30px;
            background: #3a3a3a; /* 深灰色背景 */
            color: #f0f0f0; /* 浅色文字 */
        }
        
        .main-input:focus {
            outline: none;
            border-color: #707070; /* 更亮的灰色作为焦点状态 */
            box-shadow: 0 0 0 2px rgba(112, 112, 112, 0.3); /* 调整阴影颜色 */
        }
        
        .connection-panel {
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
            margin-bottom: 30px;
            align-items: center;
        }
        
        .ip-input-container {
            flex: 1;
            display: flex;
            align-items: center;
            min-width: 200px;
        }
        
        .ip-input {
            flex: 1;
            height: 50px;
            border: 2px solid #555555;
            border-radius: 12px 0 0 12px;
            padding: 0 16px;
            font-size: 16px;
            border-right: none;
            background: #3a3a3a;
            color: #f0f0f0;
        }
        
        .status-indicator {
            height: 50px;
            width: 50px;
            display: flex;
            justify-content: center;
            align-items: center;
            border: 2px solid #555555;
            border-radius: 0 12px 12px 0;
            background: #3a3a3a;
            font-weight: bold;
        }
        
        .connected {
            color: #4caf50;
        }
        
        .disconnected {
            color: #f44336;
        }
        
        .connect-btn {
            height: 50px;
            padding: 0 30px;
            border: none;
            border-radius: 12px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .connect {
            background: #2e7d32; /* 更深的绿色 */
            color: white;
        }
        
        .connect:hover {
            background: #388e3c;
        }
        
        .disconnect {
            background: #c62828; /* 更深的红色 */
            color: white;
        }
        
        .disconnect:hover {
            background: #d32f2f;
        }
        
        .action-panel {
            display: flex;
            flex-direction: column;
            gap: 15px;
        }
        
        .buttons-container {
            display: flex;
            gap: 20px;
            flex-wrap: wrap;
        }
        
        .button-wrapper {
            flex: 1;
            min-width: 180px;
            display: flex;
            flex-direction: column;
        }
        
        .action-btn {
            width: 100%;
            height: 60px;
            border: none;
            border-radius: 12px;
            font-size: 18px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
        .analyze-problem {
            background: #e65100; /* 更深的橙色 */
            color: white;
        }
        
        .analyze-problem:hover:not(.disabled) {
            background: #f57c00;
        }
        
        .analyze-code {
            background: #1565c0; /* 更深的蓝色 */
            color: white;
        }
        
        .analyze-code:hover:not(.disabled) {
            background: #1976d2;
        }
        
        .disabled {
            opacity: 0.6;
            cursor: not-allowed;
        }
        
        .response-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-top: 15px;
            width: 100%;
        }
        
        .response-info {
            font-size: 16px;
            color: #4caf50; /* 保持绿色但稍微加深 */
            text-align: center;
            min-height: 24px;
            margin-bottom: 8px;
            width: 100%;
        }
        
        .countdown {
            font-size: 16px;
            color: #9e9e9e; /* 中灰色 */
            text-align: center;
            width: 100%;
        }
        
        /* 大屏幕下的特殊样式 */
        @media (min-width: 1200px) {
            #app {
                max-width: 1400px;
                padding: 50px;
            }
            
            .main-input {
                min-height: 500px;
                font-size: 20px;
            }
            
            .title {
                font-size: 36px;
            }
        }
        
        @media (max-width: 600px) {
            #app {
                padding: 20px;
            }
            
            .title {
                font-size: 24px;
                margin-bottom: 20px;
            }
            
            .main-input {
                min-height: 300px;
                font-size: 16px;
            }
            
            .ip-input-container {
                min-width: 100%;
            }
            
            .connect-btn {
                width: 100%;
            }
            
            .button-wrapper {
                min-width: 100%;
            }
        }
    </style>
</head>
<body>
    <div id="app">
        <textarea 
            class="main-input" 
            placeholder="等待回答..." 
            v-model="mainContent"
            readonly
        ></textarea>
        
        <div class="connection-panel">
            <div class="ip-input-container">
                <input v-model="wsUrl" class="ip-input" type="text" placeholder="请输入WebSocket服务器地址">
                <div :class="['status-indicator', isConnected ? 'connected' : 'disconnected']">
                    {{ isConnected ? '✓' : '✗' }}
                </div>
            </div>
            <button 
                @click="toggleConnection" 
                :class="['connect-btn', isConnected ? 'disconnect' : 'connect']"
            >
                {{ isConnected ? '断开连接' : '连接' }}
            </button>
        </div>
        
        <div class="action-panel">
            <div class="buttons-container">
                <div class="button-wrapper">
                    <button 
                        @click="analyzeProblem" 
                        :disabled="isButtonDisabled || !isConnected"
                        :class="['action-btn', 'analyze-problem', (isButtonDisabled || !isConnected) ? 'disabled' : '']"
                    >
                        分析问题
                    </button>
                </div>
                
                <div class="button-wrapper">
                    <button 
                        @click="analyzeCode" 
                        :disabled="isButtonDisabled || !isConnected"
                        :class="['action-btn', 'analyze-code', (isButtonDisabled || !isConnected) ? 'disabled' : '']"
                    >
                        分析代码
                    </button>
                </div>
            </div>
            
            <div class="response-container">
                <div class="response-info">{{ responseInfo }}</div>
                <div v-if="isButtonDisabled" class="countdown">按钮可用时间: {{ countdown }}秒</div>
            </div>
        </div>
    </div>

    <script>
        const { createApp, ref, onMounted, onUnmounted } = Vue;
        
        createApp({
            setup() {
                const wsUrl = ref('192.168.124.10');
                const isConnected = ref(false);
                const isButtonDisabled = ref(false);
                const countdown = ref(0);
                const timer = ref(null);
                const ws = ref(null);
                const mainContent = ref('');
                const responseInfo = ref('');
                
                onMounted(() => {
                    const savedIp = localStorage.getItem('websocket_ip');
                    if (savedIp) {
                        wsUrl.value = savedIp;
                    }
                });

                const saveIpToLocalStorage = () => {
                    localStorage.setItem('websocket_ip', wsUrl.value);
                };

                const toggleConnection = () => {
                    if (isConnected.value) {
                        disconnect();
                    } else {
                        connect();
                    }
                };
                
                const connect = () => {
                    try {
                        responseInfo.value = '连接中...';
                        saveIpToLocalStorage();
                        const addr = "ws://" + wsUrl.value + ":8765";
                        ws.value = new WebSocket(addr);
                        
                        ws.value.onopen = () => {
                            isConnected.value = true;
                            responseInfo.value = '已连接到服务器';
                        };
                        
                        ws.value.onclose = () => {
                            isConnected.value = false;
                            responseInfo.value = '连接已断开';
                        };
                        
                        ws.value.onerror = (error) => {
                            console.error('WebSocket错误:', error);
                            responseInfo.value = '连接错误: ' + error.type;
                            isConnected.value = false;
                        };
                        
                        ws.value.onmessage = (event) => {
                            try {
                                // 先解析JSON
                                const data = JSON.parse(event.data);
                                
                                // 尝试提取content内容
                                const content = data.choices?.[0]?.message?.content;
                                
                                // 如果有content就使用content，否则使用整个JSON字符串
                                mainContent.value = content ?? JSON.stringify(data, null, 2);
                                
                                if (isButtonDisabled.value) {
                                    clearInterval(timer.value);
                                    isButtonDisabled.value = false;
                                    countdown.value = 0;
                                }
                            } catch (e) {
                                console.log('收到非JSON消息或解析失败:', event.data);
                                responseInfo.value = '收到非JSON消息';
                                mainContent.value = event.data; // 直接显示原始数据
                                
                                if (isButtonDisabled.value) {
                                    clearInterval(timer.value);
                                    isButtonDisabled.value = false;
                                    countdown.value = 0;
                                }
                            }
                        };
                    } catch (error) {
                        console.error('连接失败:', error);
                        responseInfo.value = '连接失败: ' + error.message;
                    }
                };
                
                const disconnect = () => {
                    if (ws.value) {
                        ws.value.close();
                        isConnected.value = false;
                        responseInfo.value = '已断开连接';
                    }
                };
                
                const analyzeProblem = () => {
                    if (!isConnected.value) return;
                    
                    // 发送消息
                    if (ws.value && ws.value.readyState === WebSocket.OPEN) {
                        ws.value.send("1");
                        responseInfo.value = '已发送分析问题请求';
                    }
                    
                    // 禁用按钮并开始倒计时
                    disableButtons();
                };
                
                const analyzeCode = () => {
                    if (!isConnected.value) return;
                    
                    // 发送消息
                    if (ws.value && ws.value.readyState === WebSocket.OPEN) {
                        ws.value.send("2");
                        responseInfo.value = '已发送分析代码请求';
                    }
                    
                    // 禁用按钮并开始倒计时
                    disableButtons();
                };
                
                const disableButtons = () => {
                    isButtonDisabled.value = true;
                    mainContent.value = '';
                    countdown.value = 15;
                    
                    timer.value = setInterval(() => {
                        countdown.value--;
                        
                        if (countdown.value <= 0) {
                            clearInterval(timer.value);
                            isButtonDisabled.value = false;
                            responseInfo.value = '按钮已重新启用';
                        }
                    }, 1000);
                };
                
                onUnmounted(() => {
                    if (ws.value) {
                        ws.value.close();
                    }
                    
                    if (timer.value) {
                        clearInterval(timer.value);
                    }
                });
                
                return {
                    wsUrl,
                    isConnected,
                    isButtonDisabled,
                    countdown,
                    mainContent,
                    responseInfo,
                    toggleConnection,
                    analyzeProblem,
                    analyzeCode
                };
            }
        }).mount('#app');
    </script>
</body>
</html>